<template>
    <el-card class="box-card">
        <h2 class="title">用户信息</h2>
        <el-form
                ref="userFormRef"
                :rules="rules"
                :model="userForm"
                label-width="80px"
        >
            <el-row>
                <el-col :span="colSize" :offset="offsetSize">
                    <el-input type="hidden" v-model="userForm.id"></el-input>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="userForm.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="colSize" :offset="offsetSize">
                    <el-form-item label="登录名" prop="loginName">
                        <el-input v-model="userForm.loginName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="colSize" :offset="offsetSize">
                    <el-form-item label="联系方式" prop="contact">
                        <el-input v-model="userForm.contact"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="colSize" :offset="offsetSize">
                    <el-form-item label="电子邮箱" prop="email">
                        <el-input v-model="userForm.email"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="handleType !== 'view'">
                <el-col :span="colSize" :offset="8">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提 交</el-button>
                        <el-button @click="onCancel">取 消</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="handleType === 'view'">
                <el-col :span="colSize" :offset="9">
                    <el-form-item>
                        <el-button type="primary" @click="onCancel">返 回</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</template>

<script>
    import {api_saveUser, api_userInfo} from "../../api/user";

    export default {
        data() {
            return {
                handleType: 'add',
                colSize: 18,
                offsetSize: 3,
                userForm: {
                    id: null,
                    name: null,
                    loginName:null,
                    contact:null,
                    email:null,
                },
                rules: {
                    name: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
                    pid: [{ required: true, message: '请选择父级分类', trigger: 'blur' }],
                },
            }
        },
        created() {
            this.getHandleType()
        },
        mounted() {
            this.getInfo()
        },
        methods: {
            async getInfo() {
                let id = this.$route.query.id
                if (id) {
                    const { data: res } = await api_userInfo({
                        id: id,
                    })
                    this.userForm = res.data
                    console.log(res.data)
                }
            },
            getHandleType() {
                this.handleType = this.$route.query.handleType
            },
            onSubmit() {
                this.$refs.productTypeFormRef.validate(async (valid) => {
                    if (!valid) {
                        return false
                    }
                    const { data: res } = await api_saveUser(this.userForm)
                    if (!res.success) {
                        this.$message.error(res.msg)
                        return
                    }
                    this.$message({
                        message: res.msg,
                        type: 'success',
                    })
                    await this.$router.push('/system/userList')
                })
            },
            onCancel() {
                this.$router.push('/system/userList')
            },
        },
    }
</script>

<style scoped>
    .box-card {
        width: 60%;
        margin: auto;
    }
    .title {
        text-align: center;
        margin-bottom: 40px;
        font-size: 40px;
    }
</style>
